<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { useAddressStore } from '@/stores/modules/address'
import { storeToRefs } from 'pinia'
const addressStore = useAddressStore()
const { addressList } = storeToRefs(addressStore)
onShow(() => {
  addressStore.getAddressList()
})

/**点击按钮进入修改地址页面 */
const toEditAddress = (id: string) => {
  uni.navigateTo({
    url: `/pagesMember/address-form/address-form?id=${id}`,
  })
}

/**点击按钮进行删除地址 */
const deleteAddress = (id: string) => {
  uni.showModal({
    title: '删除收货地址',
    content: '是否删除该收货地址?',
    success: async (success) => {
      if (success.confirm) {
        try {
          await addressStore.deleteAddress(id)
          await addressStore.getAddressList()
          uni.showToast({
            title: '删除成功',
            icon: 'success',
          })
        } catch (error) {
          uni.showToast({
            title: '删除失败',
            icon: 'error',
          })
        }
      }
    },
  })
}
// 订单页面选择收货地址
const query = defineProps<{
  from?: string
}>()
/**选择订单收货地址 */
const selectAddress = (id: string) => {
  if (query.from === 'order') {
    addressStore.selectOrderAddress(id)
    uni.navigateBack()
  }
}
</script>

<template>
  <view class="viewport">
    <!-- 地址列表 -->
    <scroll-view class="scroll-view" scroll-y>
      <view v-if="addressList.length !== 0" class="address">
        <!-- 地址列表-滑动组件 -->
        <uni-swipe-action>
          <uni-swipe-action-item class="item" v-for="item in addressList" :key="item.id">
            <!-- 收货地址项 -->
            <view class="item-content" @click="selectAddress(item.id)">
              <view class="user">
                {{ item.receiver }}
                <text class="contact">{{ item.contact }}</text>
                <text v-if="item.isDefault === 1" class="badge">默认</text>
              </view>
              <view class="locate">{{ item.fullLocation }} {{ item.address }}</view>
            </view>
            <template #right>
              <view class="operate">
                <button class="edit-button" @click="toEditAddress(item.id)">修改</button>
                <button class="delete-button" @click="deleteAddress(item.id)">删除</button>
              </view>
            </template>
          </uni-swipe-action-item>
        </uni-swipe-action>
      </view>
      <view v-else class="blank">暂无收货地址</view>
    </scroll-view>
    <!-- 添加按钮 -->
    <view class="add-btn">
      <navigator hover-class="none" url="/pagesMember/address-form/address-form">
        新建地址
      </navigator>
    </view>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f4f4f4;

  .scroll-view {
    padding-top: 20rpx;
  }
}

.address {
  padding: 0 20rpx;
  margin: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .operate {
    display: flex;
    /* 删除按钮 */
    .delete-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 100%;
      font-size: 28rpx;
      color: #fff;
      border-radius: 0;
      padding: 0;
      background-color: #cf4444;
    }

    /* 修改按钮 */
    .edit-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 100%;
      font-size: 28rpx;
      color: #fff;
      border-radius: 0;
      padding: 0;
      background-color: #1f9cf0;
    }
  }

  .item-content {
    line-height: 1;
    padding: 40rpx 10rpx 38rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
  }

  .item:last-child .item-content {
    border: none;
  }

  .user {
    font-size: 28rpx;
    margin-bottom: 20rpx;
    color: #333;

    .contact {
      color: #666;
    }

    .badge {
      display: inline-block;
      padding: 4rpx 10rpx 2rpx 14rpx;
      margin: 2rpx 0 0 10rpx;
      font-size: 26rpx;
      color: #27ba9b;
      border-radius: 6rpx;
      border: 1rpx solid #27ba9b;
    }
  }

  .locate {
    line-height: 1.6;
    font-size: 26rpx;
    color: #333;
  }
}

.blank {
  margin-top: 300rpx;
  text-align: center;
  font-size: 32rpx;
  color: #888;
}

.add-btn {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
